<template>
  <div v-once class="container mx-auto w-full h-full mb-4">
    <div class="relative overflow-hidden px-2">
      <div class="border-4 border-yellow-200 absolute h-full right-1/2"></div>
      <div
        v-for="(point, index) of timePoints"
        :key="index"
        class="mb-4 flex justify-between items-center w-full"
        :class="[align[index % 2]]"
      >
        <div class="w-5/12"></div>
        <div class="w-5/12 py-2 flex flex-col" :class="[textAlign[index % 2]]">
          <time :datetime="point.date" class="mb-3 text-base text-emerald-500">
            {{ point.date }}
          </time>
          <h4
            :title="point.title"
            class="mb-2 font-bold text-base md:text-xl truncate"
          >
            {{ point.title }}
          </h4>
          <p
            v-for="(paragraph, i) of point.paragraphs"
            :key="i"
            class="text-xs break-words md:text-sm my-1 text-gray-500"
          >
            {{ paragraph }}
          </p>
          <ul class="text-purple-500 text-xs md:text-sm">
            <li class="truncate" v-for="(item, i) of point.items" :key="i">
              {{ item }}
            </li>
          </ul>
        </div>
      </div>
    </div>
    <img class="mx-auto -mt-32" :src="tb" />
  </div>
</template>
<script lang="ts" setup>
import tb from "@/assets/timeline_bottom.png";
interface TimePoint {
  date: string;
  title: string;
  paragraphs?: Array<string>;
  items?: Array<string>;
}
const timePoints = [
  {
    date: "2022年2月4日",
    title: "前端代码开工",
    paragraphs: [
      "好容易在2022年春节假期里，才勉强把后台初步完成。 ",
      "计划把基本功能实现以后，做一期视频教程《曾老师的Vue3组件进阶》。",
    ],
  },
  {
    date: "2022年2月5日",
    title: "前端技术栈选型",
    items: [
      "TypeScript",
      "Vue3 + vue-router + pinia",
      "vueuse",
      "axios + lodash + dayjs",
      "windicss",
    ],
  },
  {
    date: "2022年2月22日",
    title: "初步完成基本组件",
    paragraphs: ["完成按钮、表单、模态框、消息提示组件", "完成用户注册功能。"],
  },
  {
    date: "2022年3月6日",
    title: "完成用户登录",
    paragraphs: ["使用 pinia 保存用户登录状态"],
  },
  {
    date: "2022年3月12日",
    title: "复刻 Todos 功能",
    paragraphs: ["实现时间线组件", "添加动画效果"],
  },
  {
    date: "2022年3月21日",
    title: "Todos 基本功能",
    paragraphs: [
      "实现添加、删除、完成、查询和滚动加载",
      "todos[]成为全局状态",
      "使用nprogress显示请求加载状态",
    ],
  },
  {
    date: "2022年3月24日",
    title: "部署客户端上线",
    paragraphs: ["修正bug无数", "完成复刻教学案例功能"],
  },
  {
    date: "2022年4月9日",
    title: "开放客户端代码",
    paragraphs: [
      "https://gitee.com/zengsun/todos-ts-v3",
      "基本复刻教学示例的内容",
      "以后会逐步增强功能",
    ],
  },
  {
    date: "2022年10月16日",
    title: "重构表单实现",
    paragraphs: [
      "使用 useForm / useField 对组件逻辑抽象",
      "利用 input:valid 伪类实现 label 效果",
    ],
  },
  {
    date: "2022年11月18日",
    title: "Nuxt3 / Next13",
    paragraphs: [
      "Next13 和 Nuxt3 混合框架实现 Todos 功能",
      "尝试迁移部分实现到 Next13",
    ],
  },
  {
    date: "2022年11月20日",
    title: "尝试 Next13",
    paragraphs: ["使用前端混合框架实现 Todos 功能"],
  },
  {
    date: "2023年1月26日",
    title: "使用 Go 重写服务后端",
    paragraphs: ["为方便后期教学部署方便"],
  },
  {
    date: "2022年4月16日",
    title: "调整项目结构",
    paragraphs: ["引入 unplugin-auto-import 插件！"],
  },
  {
    date: "2022年4月19日",
    title: "用 unocss 代替 windicss",
  },
  {
    date: "2022年5月20日",
    title: "Vue 3.3 更新",
    paragraphs: ["除去少数组件外，将全面使用 setup 语法糖"],
  },
] as TimePoint[];
timePoints.reverse();

const [align, textAlign] =
  timePoints.length % 2
    ? [
        ["", "flex-row-reverse"],
        ["text-left", "text-right"],
      ]
    : [
        ["flex-row-reverse", ""],
        ["text-right", "text-left"],
      ];
</script>
